<template>
  <div class="floor-layout tpl-69" :style="`padding:${data.blockStyle.page_padding / 2}px`">
    <div :class="data.blockClass == 'row_multiple' ? 'layout-main' : 'row_list' ">
      <div class="flash_sale">
        <div class="flash_head">
          <span v-if="data.blockClass == 'row_multiple'" class="head_name">
            <img src="../imgs/seckill.png" alt="">
          </span>
          <span v-else class="head_name_e">
            <img src="../imgs/everyday-seckill.png" alt="">
          </span>
          <div v-if="data.blockClass == 'row_multiple'" class="countdown">
            <span class="countdown_cell">23</span><span
            class="countDown_text">:</span><span
            class="countdown_cell">59</span><span
            class="countDown_text">:</span><span
            class="countdown_cell">59</span>
          </div>
          <div v-else class="countdown">
            <div class="seckill-time">
              <span>10:00</span>
              <span>已开抢</span>
            </div>
            <div class="seckill-time">
              <span>14:00</span>
              <span>已开抢</span>
            </div>
            <div class="seckill-time">
              <span>17:00</span>
              <span>抢购中</span>
            </div>
            <div class="seckill-time">
              <span>19:00</span>
              <span>待抢购</span>
            </div>
            <div class="seckill-time">
              <span>21:00</span>
              <span>待抢购</span>
            </div>
          </div>
          <a v-if="data.blockClass == 'row_multiple'" class="show_more" href="">全部场次<i class="el-icon-arrow-right"></i></a>
        </div>
        <div v-if="data.blockClass == 'row_multiple'" class="flash_goods">
          <div class="flash_cell"
          v-for="(block, index) in data.blockList"
          :key="index">
            <layout-item :block="block">
              <template slot-scope="{ block }">
                <div class="goods_pic"><img :src="block.block_value.goods_pic" /></div>
                <div class="goods_name" v-if="data.blockStyle.goods_name">{{block.block_value.goods_name}}</div>
                <div class="goods_details">
                  <span class="sale_price" v-if="data.blockStyle.goods_price">{{block.block_value.sale_price}}</span>
                  <span class="old_price" v-if="data.blockStyle.old_price">{{block.block_value.old_price}}</span>
                  <span class="second" v-if="data.blockStyle.immediately_rob">秒</span>
                </div>
              </template>
            </layout-item>
          </div>
        </div>
        <div v-else class="flash_goods">
          <div class="flash_cell"
          v-for="(block, index) in data.blockList"
          :key="index"
          :style="`margin-top:${data.blockStyle.goods_padding / 2}px`">
            <layout-item :block="block">
              <template slot-scope="{ block }">
                <div class="goods_pic"><img :src="block.block_value.goods_pic" /></div>
                <div class="goods_details">
                  <div class="goods_name" v-if="data.blockStyle.goods_name">{{block.block_value.goods_name}}</div>
                  <div class="goods_data">
                    <div class="goods_bar" v-if="data.blockStyle.seckill_progress">
                      <div class="goods_bar_in">
                      </div>
                      <div class="goods_bar_text">70%</div>
                    </div>
                    <div class="robbed" v-if="data.blockStyle.goods_robbed">已抢999份</div>
                    <div class="limit" v-if="data.blockStyle.goods_limit">限购3分</div>
                  </div>
                  <div class="goods_price">
                    <div class="seckill_price">
                      <span class="price" v-if="data.blockStyle.goods_price">¥9.9</span>
                      <span class="old_price" v-if="data.blockStyle.old_price">¥399.99</span>
                    </div>
                    <button v-if="data.blockStyle.immediately_rob">立即抢</button>
                  </div>
                </div>
              </template>
            </layout-item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'

  const noImg = '';
  export default {
    name: 'tpl_69',
    mixins: [mixin],
    title: '限时抢购',
    dataTpl: {
      tpl_id: 69,
      blockList: [
        {
          block_type: 'GOODS',
          block_value: {
            'id': null,
            'goods_pic': noImg,
            'goods_name': "这是一条数据这是一条数据这是一条数据这是一条数据",
            'sale_price': '¥99.9',
            'old_price': 199.9
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'id': null,
            'goods_pic': noImg,
            'goods_name': '这是一条数据这是一条数据这是一条数据这是一条数据',
            'sale_price': '¥99.9',
            'old_price': 199.9
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'id': null,
            'goods_pic': noImg,
            'goods_name': '这是一条数据这是一条数据这是一条数据这是一条数据',
            'sale_price': '¥99.9',
            'old_price': 199.9
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'id': null,
            'goods_pic': noImg,
            'goods_name': '这是一条数据这是一条数据这是一条数据这是一条数据',
            'sale_price': '¥99.9',
            'old_price': 199.9
          },
          block_opt: ''
        }
      ],
      blockType: 'SECKILL',
      blockClass: 'row_multiple', // row_multiple, row_list
      blockStyle: {
        listStyle: 'row_multiple',
        // 页面外边距
        page_padding: 10,
        // 商品间距
        goods_padding: 0,
        // 商品名称
        goods_name: true,
        // 秒杀进度
        seckill_progress: true,
        // 已抢N份
        goods_robbed: true,
        // 限购N份
        goods_limit: true,
        // 商品价格
        goods_price: true,
        // 划线价格
        old_price: true,
        // 立即抢
        immediately_rob: true
      }
    }
  }
</script>